<!--
  @Descripttion:：简历编辑
  @Author：yejianbo
  @Date：2022年05月22日 03:06:59
-->
<template>
  <section class="resume-review">
    <el-form ref="form" :model="form" label-width="150px" label-position="left">
      <!-- 联系方式 -->
      <section class="block pt30">
        <div class="title">
          联系方式 <span class="en">Contact Information</span>
        </div>
        <div class="contact">
          <el-row>
            <el-col :span="17" :offset="7">
              <div class="row1">
                <span>手机号码</span>
                <span>15094863762</span>
              </div>
            </el-col>
            <el-col :span="17" :offset="7">
              <div class="row1">
                <span>邮箱地址</span>
                <span>zhangtongxue@163.com</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <!-- 个人信息 -->
      <section class="block pt30">
        <div class="title">
          个人信息 <span class="en">Personal Information</span>
          <div class="edit-btn" type="text"><i class="edit-icon"></i> 编辑</div>
        </div>
        <div class="user-info">
          <img
            class="touxiang"
            src="../../../../assets/images/touxiang1.png"
            alt="用户头像"
          />
          <div class="row1">张同学</div>
          <div class="row2">
            男<span class="line"></span>20岁<span class="line"></span>深圳<span
              class="line"
            ></span
            >21年毕业<span class="line"></span>汉族<span class="line"></span
            >党员
          </div>
        </div>
      </section>
      <!-- 求职/实习意向 -->
      <section class="block pt30">
        <div class="title">
          求职/实习意向 <span class="isRequire">*必填</span
          ><span class="en">Job Preferences</span>
          <div class="add-btn">+ 添加求职意向</div>
        </div>
        <div class="job-wish-item" v-if="!jobPreferencesDialog">
          <div class="row1">产品经理</div>
          <div class="row4">
            <span class="label">薪资要求：</span
            ><span class="value">20000-40000元</span>
            <span class="label">期望城市：</span><span class="value">广州</span>
          </div>
          <div class="row4">
            <span class="label">期望行业：</span
            ><span class="value">网络/信息安全</span>
          </div>
          <div
            class="edit-btn top0"
            type="text"
            @click="handleOpen('jobPreferencesDialog')"
          >
            <i class="edit-icon"></i> 编辑
          </div>
        </div>
        <el-form
          v-else
          ref="jobPreferenceForm"
          :model="jobPreferenceForm"
          label-position="left"
          label-width="150px"
        >
          <el-form-item label="期望职位">
            <span slot="label" class="left-label">
              <span calss="cn-label">期望职位</span><br />
              <span class="en-label">Position Applied</span>
            </span>
            <el-input
              v-model="jobPreferenceForm.jobName"
              placeholder="请输入期望职位,如：销售经理"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="期望行业">
            <span slot="label" class="left-label">
              <span calss="cn-label">期望行业</span><br />
              <span class="en-label">Industry Preferences</span>
            </span>
            <el-cascader
              v-model="jobPreferenceForm.industryType"
              style="width: 50%"
              :options="businessAreaData"
              @change="businessAreaChange"
              placeholder="请选择期望行业，如：互联网/电子商务"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="期望城市">
            <span slot="label" class="left-label">
              <span calss="cn-label">期望城市</span><br />
              <span class="en-label">Target City</span>
            </span>
            <el-cascader
              v-model="jobPreferenceForm.city"
              style="width: 50%"
              :options="cityOptions"
              @change="handleCityChange"
              placeholder="请选择期望行业，如：互联网/电子商务"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="薪资要求">
            <span slot="label" class="left-label">
              <span calss="cn-label">薪资要求</span><br />
              <span class="en-label">Target Salary</span>
            </span>
            <el-input
              placeholder="最低"
              style="width: 280px"
              v-model="jobPreferenceForm.lowSalary"
            >
            </el-input>
            —
            <el-input
              placeholder="最高"
              style="width: 280px"
              v-model="jobPreferenceForm.hightSalary"
            >
            </el-input>
            元/天
          </el-form-item>
          <el-form-item label=" ">
            <el-button @click="jobPreferencesDialog = false">取消</el-button>
            <el-button type="primary">保存并更新</el-button>
            <el-popconfirm
              title="确定删除吗？"
              class="delete-icon"
              @confirm="deleteConfirm"
            >
              <i class="delete-icon" slot="reference"></i>
            </el-popconfirm>
          </el-form-item>
        </el-form>
      </section>
      <!-- 教育经历 -->
      <section class="block pt30">
        <div class="title">
          教育经历<span class="isRequire">*必填</span
          ><span class="en">Educaiton</span>
          <div class="add-btn">+ 添加教育经历</div>
        </div>
        <div class="word-record-item">
          <div class="educate" v-if="!educateDialog">
            深圳大学<span class="info">本科</span
            ><span class="info">网络信息安全技术</span
            ><span class="info">有学位证书</span
            ><span class="info">2000.06-2015.05</span>
            <div
              class="edit-btn"
              type="text"
              @click="handleOpen('educateDialog')"
            >
              <i class="edit-icon"></i> 编辑
            </div>
          </div>
          <el-form
            v-else
            ref="educationForm"
            :model="educationForm"
            label-position="left"
            label-width="150px"
          >
            <el-form-item label="学校名称">
              <span slot="label" class="left-label">
                <span calss="cn-label">学校名称</span><br />
                <span class="en-label">School</span>
              </span>
              <el-input
                v-model="educationForm.schoolName"
                placeholder="请输入学校名称"
                style="width: 50%"
              />
            </el-form-item>
            <el-form-item label="教育状态">
              <span slot="label" class="left-label">
                <span calss="cn-label">教育状态</span><br />
                <span class="en-label">Highest Degree</span>
              </span>
              <el-select
                v-model="educationForm.hightEducate"
                placeholder="请选择教育状态"
              >
                <el-option label="大专" value="大专"> </el-option>
                <el-option label="本科" value="本科"> </el-option>
                <el-option label="硕士" value="硕士"> </el-option>
                <el-option label="博士" value="博士"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="全日制/非全日制">
              <span slot="label" class="left-label">
                <span calss="cn-label">全日制/非全日制</span><br />
                <span class="en-label">Full-Time/ Part-Time</span>
              </span>
              <SelectCom
                :options="educateClassy"
                v-model="educationForm.educateType"
              />
            </el-form-item>
            <el-form-item label="学位证书">
              <span slot="label" class="left-label">
                <span calss="cn-label">学位证书</span><br />
                <span class="en-label">Graduate Certificate</span>
              </span>
              <SelectCom
                :options="[
                  { label: '有', value: '1' },
                  { label: '无', value: '0' },
                ]"
                v-model="educationForm.certificate"
              />
            </el-form-item>
            <el-form-item label="所学专业">
              <span slot="label" class="left-label">
                <span calss="cn-label">所学专业</span><br />
                <span class="en-label">Major</span>
              </span>
              <el-input
                v-model="educationForm.major"
                style="width: 50%"
                placeholder="请输入所学专业"
              />
            </el-form-item>
            <el-form-item label="在校时间">
              <span slot="label" class="left-label">
                <span calss="cn-label">在校时间</span><br />
                <span class="en-label">Time Period</span>
              </span>
              <el-date-picker
                v-model="form.onSchoolDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label=" ">
              <el-button @click="jobPreferencesDialog = false">取消</el-button>
              <el-button type="primary">保存并更新</el-button>
              <el-popconfirm
                title="确定删除吗？"
                class="delete-icon"
                @confirm="deleteConfirm"
              >
                <i class="delete-icon" slot="reference"></i>
              </el-popconfirm>
            </el-form-item>
          </el-form>
          <div class="educate">
            深圳大学<span class="info">硕士</span
            ><span class="info">网络信息安全技术</span
            ><span class="info">有学位证书</span
            ><span class="info">2000.06-2015.05</span>
            <div
              class="edit-btn"
              type="text"
              @click="handleOpen('educateDialog')"
            >
              <i class="edit-icon"></i> 编辑
            </div>
          </div>
        </div>
      </section>
      <!-- 已修课程 -->
      <section class="block pt30">
        <div class="title">
          已修课程<span class="en">Course Completed</span>
        </div>
        <div
          class="empty-btn"
          @click="editModule('editCourse')"
          v-if="!editCourse"
        >
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加已修课程
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="课程名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">课程名称</span><br />
              <span class="en-label">Course</span>
            </span>
            <el-select
              v-model="form.courseName"
              placeholder="请选择课程"
              clearable
              style="width: 50%"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.COURSE_NAME)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="完成时间">
            <span slot="label" class="left-label">
              <span calss="cn-label">完成时间</span><br />
              <span class="en-label">Completed Time</span>
            </span>
            <el-date-picker
              v-model="form.courseEndDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择课程完成日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 工作/实习经历 -->
      <section class="block pt30">
        <div class="title">
          工作/实习经历<span class="en">Work Experience/Internship</span>
        </div>
        <div class="empty-btn" @click="editModule('editWord')" v-if="!editWord">
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加工作/实习经历
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="公司名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">公司名称</span><br />
              <span class="en-label">Company</span>
            </span>
            <el-input
              v-model="form.companyName"
              placeholder="请输入公司名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="所属行业">
            <span slot="label" class="left-label">
              <span calss="cn-label">所属行业</span><br />
              <span class="en-label">Industry</span>
            </span>
            <el-cascader
              v-model="form.industryType"
              style="width: 50%"
              :options="businessAreaData"
              @change="businessAreaChange"
              placeholder="请选择所属行业"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="职位名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">职位名称</span><br />
              <span class="en-label">Occupation</span>
            </span>
            <el-input
              v-model="form.jobName"
              placeholder="请输入职位名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="职位类型">
            <span slot="label" class="left-label">
              <span calss="cn-label">职位类型</span><br />
              <span class="en-label">Work Tpye</span>
            </span>
            <el-select
              v-model="form.jobType"
              placeholder="请选择职位类型"
              clearable
              style="width: 50%"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.JOB_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="在职时间">
            <span slot="label" class="left-label">
              <span calss="cn-label">在职时间</span><br />
              <span class="en-label">Time Period</span>
            </span>
            <el-date-picker
              v-model="form.onHireDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="离职日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工作描述">
            <span slot="label" class="left-label">
              <span calss="cn-label">工作描述</span><br />
              <span class="en-label">Job Description</span>
            </span>
            <el-input
              v-model="form.jobDesc"
              placeholder="请输入工作内容
如： 
1.主要负责绩效考评相关工作
2，完成绩效考核获得优秀评级"
              type="textarea"
              :rows="4"
              maxlength="2000"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 项目经历 -->
      <section class="block pt30">
        <div class="title">
          项目经历<span class="en">Projects Experience</span>
        </div>
        <div
          class="empty-btn"
          @click="editModule('editProject')"
          v-if="!editProject"
        >
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加项目经历
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="项目名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">项目名称</span><br />
              <span class="en-label">Project Name</span>
            </span>
            <el-input
              v-model="form.projectNmae"
              placeholder="请输入项目名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="项目时间">
            <span slot="label" class="left-label">
              <span calss="cn-label">项目时间</span><br />
              <span class="en-label">Project Period</span>
            </span>
            <el-date-picker
              v-model="form.projectDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目描述">
            <span slot="label" class="left-label">
              <span calss="cn-label">项目描述</span><br />
              <span class="en-label">Project Description</span>
            </span>
            <el-input
              v-model="form.projectDesc"
              placeholder="更完善的项目信息有助于HR快速找到你为保护隐私，请不要填写手机，QQ，微信等联系方式"
              type="textarea"
              maxlength="2000"
              show-word-limit
              :rows="4"
            />
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 语言能力 -->
      <section class="block pt30">
        <div class="title">语言能力<span class="en">Languages Level</span></div>
        <div class="empty-btn" @click="editModule('editLang')" v-if="!editLang">
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加语言能力
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="语种">
            <span slot="label" class="left-label">
              <span calss="cn-label">语种</span><br />
              <span class="en-label">Language</span>
            </span>
            <el-select
              v-model="form.lang"
              placeholder="请选择语种"
              clearable
              style="width: 50%"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.LANGUAGES)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="掌握程度">
            <span slot="label" class="left-label">
              <span calss="cn-label">掌握程度</span><br />
              <span class="en-label">Level</span>
            </span>
            <el-radio-group v-model="form.langSpecialized">
              <el-radio
                :label="dict.value"
                v-for="dict in this.getDictDatas(DICT_TYPE.LEVEL_ATTAINED)"
                :key="dict.value"
                >{{ dict.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 专业技能 -->
      <section class="block pt30">
        <div class="title">专业技能<span class="en">Skill</span></div>
        <div
          class="empty-btn"
          @click="editModule('editSkill')"
          v-if="!editSkill"
        >
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加专业技能
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="技能名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">技能名称</span><br />
              <span class="en-label">Skill</span>
            </span>
            <el-select
              v-model="form.skillName"
              placeholder="请选择技能"
              clearable
              style="width: 50%"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.SKILL_NAME)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="掌握程度">
            <span slot="label" class="left-label">
              <span calss="cn-label">掌握程度</span><br />
              <span class="en-label">Level</span>
            </span>
            <el-radio-group v-model="form.skillSpecialized">
              <el-radio
                :label="dict.value"
                v-for="dict in this.getDictDatas(DICT_TYPE.LEVEL_ATTAINED)"
                :key="dict.value"
                >{{ dict.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 证书 -->
      <section class="block pt30">
        <div class="title">证书<span class="en">Certification</span></div>
        <div
          class="empty-btn"
          @click="editModule('editCretificate')"
          v-if="!editCretificate"
        >
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加证书
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="证书名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">证书名称</span><br />
              <span class="en-label">Certification Name</span>
            </span>
            <el-input
              v-model="form.certificateName"
              placeholder="请输入证书名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="获得时间">
            <span slot="label" class="left-label">
              <span calss="cn-label">获得时间</span><br />
              <span class="en-label">Certificate Period</span>
            </span>
            <el-date-picker
              v-model="form.certificateDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择获得时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
      <!-- 社会实践/活动经历 -->
      <section class="block pt30">
        <div class="title">
          社会实践/活动经历<span class="en">Social Practice</span>
        </div>
        <div
          class="empty-btn"
          @click="editModule('editPractice')"
          v-if="!editPractice"
        >
          <el-row>
            <el-col :span="14" :offset="10">
              <i class="add-icon"></i>添加社会实践/活动经历
            </el-col>
          </el-row>
        </div>
        <div class="form" v-else>
          <el-form-item label="实践/活动名称">
            <span slot="label" class="left-label">
              <span calss="cn-label">实践/活动名称</span><br />
              <span class="en-label">Practice Name</span>
            </span>
            <el-input
              v-model="form.activeName"
              placeholder="请输入项目名称"
              style="width: 50%"
            />
          </el-form-item>
          <el-form-item label="实践/活动时间">
            <span slot="label" class="left-label">
              <span calss="cn-label">实践/活动时间</span><br />
              <span class="en-label">Practice Period</span>
            </span>
            <el-date-picker
              v-model="form.activeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="实践/活动描述">
            <span slot="label" class="left-label">
              <span calss="cn-label">实践/活动描述</span><br />
              <span class="en-label">Practice Description</span>
            </span>
            <el-input
              v-model="form.activeDesc"
              placeholder="更完善的项目信息有助于HR快速找到你为保护隐私，请不要填写手机，QQ，微信等联系方式"
              type="textarea"
              maxlength="2000"
              show-word-limit
              :rows="4"
            />
          </el-form-item>
          <el-form-item label=" ">
            <el-button>取消</el-button>
            <el-button type="primary">保存并更新</el-button>
          </el-form-item>
        </div>
      </section>
    </el-form>
  </section>
</template>
<script>
import businessAreaData from "@/utils/businessAreaData.js";
import { provinceAndCityData } from "@/utils/frontDataDict.js";
// 省市的数据来源
// const {
//   provinceAndCityData,
// } = require("element-china-area-data/dist/app.commonjs");
import SelectCom from "./selectCom.vue";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    SelectCom,
  },
  // 组件状态值
  data() {
    return {
      educateClassy: [
        { label: "全日制", value: "1" },
        { label: "非全日制", value: "0" },
      ], // 学历类型，是否全日制
      cityOptions: provinceAndCityData,
      businessAreaData: businessAreaData,
      // 简历表单
      form: {
        courseName: "", // 课程名称
        courseEndDate: "", // 课程结束日期
        companyName: "", // 公司名称
        industryType: "", // 所属行业
        jobName: "", // 职位名称
        jobType: "", // 职位类型
        onHireDate: [], // 在职时间
        jobDesc: "", // 工作描述
        projectNmae: "", //项目名称
        projectDate: [], // 项目时间
        projectDesc: "", // 项目描述
        lang: "", // 语种
        langSpecialized: "1", // 语言熟练度, 默认一般
        skillName: "", // 技能名称
        skillSpecialized: "1", // 技能熟练度, 默认一般
        certificateName: "", // 证书名称
        certificateDate: "", // 证书获得日期
        activeName: "", // 实践名称
        activeDate: "", // 实践日期
        activeDesc: "", // 实践描述
        educateHistory: "", // 教育经历，数组字符串x
        wishJob: "", // 实习意向，数组字符串
      },
      // 工作意向表单
      jobPreferenceForm: {
        jobName: "", // 职位名称
        industryType: "", // 期望行业
        city: [], // 城市
        lowSalary: "", // 最低薪资 元/天
        hightSalary: "", // 最高薪资 元/天
      },
      // 教育经历表单
      educationForm: {
        schoolName: "", // 学校名称
        hightEducate: "", // 教育状态
        educateType: "1", // 全日制，非全日制
        certificate: "", // 是否有学位证书 1 有 0 无
        major: "", // 所学专业
        onSchoolDate: [], // 在校时间
      },
      editCourse: false, // 课程
      editWord: false, // 工作经历
      editProject: false, // 项目经历
      editLang: false, // 语言
      editSkill: false, // 技能
      editCretificate: false, // 证书
      editPractice: false, // 社会实践
      jobPreferencesDialog: false, // 实习意向弹窗
      educateDialog: false, // 教育经历弹窗
      jobContent: `1. 负责为吉禾日式的微信公众号撰写文章；
2. 帮助策划吉禾日式的微信公众号的福利活动；
3. 回复微信公众号的粉丝留言；
4.管理微信社群，与用户聊天，帮助用户解答疑问。`,
      subjectDesc:
        "但其实这些成绩并不是我们个人就能取得的，而是团队和公司赋予我们的。不过对于HR和公司来讲，这些数据非常能抓住眼球并且给我们加分。这都是写简历的时候我们能用到的小技巧。通过调整我们的目标和对工作的认知，加上上面我给出的一些简历写作技巧。我相信我们会更容易找到下一份好工作，这样子我们也就可以逐步把自己“不满意”的经历换成一些我们“更自信”的经历。",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 删除确认
    deleteConfirm(data) {
      console.log("删除确认>>>>", data);
    },
    // 城市切换
    handleCityChange(data) {
      console.log("期望城市>>>>", data);
    },
    handleOpen(dialogName) {
      this[dialogName] = true;
    },
    // 所属行业切换
    businessAreaChange(data) {
      console.log("data>>>>", data);
    },
    // 点击模块编辑，切换状态
    editModule(key) {
      this[key] = true;
    },
  },
  mounted() {
    console.log("cityOptions>>>", this.cityOptions);
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.resume-review {
  position: relative;
  width: 100%;
  background: #fff;
  .block {
    position: relative;
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    margin-bottom: 25px;
  }
  .pt30 {
    padding: 30px;
  }
  .top0 {
    top: 0 !important;
    transform: translateY(0) !important;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .contact {
    .row1 {
      display: inline-block;
      text-align: left;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 33px;
      margin: 12px 0;
      span {
        margin: 10px;
      }
    }
  }
  .user-info {
    text-align: center;
    .touxiang {
      display: block;
      width: 128px;
      height: 128px;
      margin: 0 auto 20px;
      background: #3d6cb0;
      border-radius: 10px;
    }
    .row1 {
      font-size: 36px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383d;
      line-height: 50px;
      margin-bottom: 10px;
    }
    .row2 {
      position: relative;
      display: inline-block;
      text-align: center;
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 30px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 14px;
        background: #9597a0;
        margin: 0 18px;
      }
    }
  }
  .title {
    position: relative;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #37383d;
    line-height: 40px;
    padding: 0;
    margin-bottom: 30px;
    .isRequire {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fe4e3d;
      line-height: 28px;
      margin-left: 12px;
    }
    .en {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 25px;
      margin-left: 15px;
    }
  }
  .edit-btn {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 36px;
    height: 36px;
    cursor: pointer;
    .edit-icon {
      display: inline-block;
      width: 32px;
      height: 32px;
      background: url("../../../../assets/images/edit_icon.png") no-repeat
        center center / cover;
      vertical-align: middle;
    }
  }
  .add-btn {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 36px;
    height: 36px;
    cursor: pointer;
    background: #3d6cb0;
    border-radius: 36px;
    color: #fff;
    padding: 0 15px;
  }
  .empty-btn {
    cursor: pointer;
    text-align: left;
    font-size: 26px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2f8efe;
    line-height: 37px;
    .add-icon {
      display: inline-block;
      width: 24px;
      height: 24px;
      background: url("../../../../assets/images/add_icon.png") no-repeat center
        center / cover;
      margin-right: 15px;
    }
  }
  .delete-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("../../../../assets/images/delete_icon.png") no-repeat
      center center / cover;
  }
  ::v-deep .el-form-item__label {
    line-height: 16px;
  }
  ::v-deep .left-label {
    .cn-label {
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 30px;
      margin-bottom: 2px;
    }
    .en-label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
    }
  }
  .job-wish-item {
    position: relative;
    .row1 {
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 25px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 17px;
        background: #9597a0;
        margin: 0 25px;
      }
    }
    .row4 {
      margin-bottom: 20px;
      .label {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-right: 17px;
      }
      .value {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #030303;
        line-height: 28px;
        margin-right: 130px;
      }
    }
  }
  .word-record-item {
    position: relative;
    padding-bottom: 27px;
    border-bottom: 1px solid #d4d6da;
    margin-bottom: 30px;
    &:last-child {
      border-bottom: 1px solid #f9f9f9;
      margin-bottom: 0;
    }
    .educate {
      position: relative;
      font-size: 25px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #37383d;
      line-height: 36px;
      margin-bottom: 35px;
      .info {
        font-size: 25px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 36px;
        margin-left: 35px;
      }

      &:last-child {
        border-bottom: 1px solid #f9f9f9;
        margin-bottom: 0;
      }
    }
    .row1 {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
      margin-bottom: 15px;
    }
    .row2 {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 33px;
      margin-bottom: 15px;
      span {
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9597a0;
        line-height: 33px;
        margin-left: 218px;
      }
    }
    .row3 {
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 28px;
      margin-bottom: 15px;
      .line {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 17px;
        background: #9597a0;
        margin: 0 25px;
      }
    }
    .row4 {
      margin-bottom: 20px;
      .label {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 28px;
        margin-right: 17px;
      }
      .value {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #030303;
        line-height: 28px;
        margin-right: 130px;
      }
    }
  }
}
</style>
